<template>
  <el-dialog :visible.sync="visible"
             @open="getBotNumber"
             append-to-body
             width="370px">
    <div class="continue-rule-form flex flex-col items-center"
         v-loading="loading">
      <img class="continue-rule-form--img"
           src="@/assets/img/notification.png"
           alt=""
           width="74">

      <strong class="continue-rule-form--text">{{text}}</strong>
      <el-button class="el-button--full"
                 type="primary"
                 size="mini"
                 @click="purchase">{{$t('paywall.purchase')}}</el-button>

      <el-button class="el-button--full el-button--smt ml-0"
                 size="mini"
                 @click="close">{{$t('attribute.cancel')}}</el-button>

    </div>
  </el-dialog>
</template>

<script>
import { InterceptContext } from '@/components/storybook/s-Intercept/intercept-context'
import { get } from 'lodash'
export default {
  name: 'BDialogBot',
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      botNumber: {},
      loading: false
    }
  },
  computed: {
    visible: {
      get () {
        return !!this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    text () {
      if (get(InterceptContext, 'bot.res.code') === 523) {
        return 'The maximum number of people purchased by Bot Usage(Unlimited) has been exceeded. please contact the administrator to purchase again so that you can open trigger switch.'
      }

      return this.$t('paywall.ruletext', { Numberone: this.botNumber.botSum || 0, Numbertwo: this.botNumber.botSum || 0 })
    }
  },
  methods: {
    async getBotNumber () {
      try {
        this.loading = true
        const { botAmount } = this.$interface.pay
        const { data: response } = await botAmount()
        this.botNumber = response.data || {}
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
    purchase () {
      this.visible = null
      this.$router.push({
        path: '/marketplace',
        query: {
          active: 'bundle'
        }
      })
    },
    close () {
      this.visible = null
    }
  }
}
</script>

<style lang="scss" scoped>
.continue-rule-form {
  padding: 20px 0;
  &--text {
    font-size: 18px;
    color: #404040;
    line-height: 26px;
    text-align: center;
    padding: 38px 0 15px;
  }
  &--tip {
    font-size: 14px;
    color: #808080;
    line-height: 20px;
    text-align: center;
    margin-bottom: 40px;
  }
}
</style>
